<template>
  <a-drawer
    :width="340"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    unmountOnClose
  >
    <template #title> 发起人设置 </template>

    <div>
      <a-form ref="demandTemplateRef" layout="vertical" :model="promoterConfig">
        <a-form-item
          field="tempName"
          label="选择指定成员"
          validate-trigger="input"
          required
        >
          <div
            style="
              border: 1px solid #c9cdd4;
              width: 100%;
              border-radius: 4px;
              display: flex;
              flex-wrap: wrap;
              min-height: 30px;
              cursor: text;
            "
            @click="tagClick"
          >
            <a-tag
              v-for="tag in promoterConfig.value.participantList"
              :key="tag.objId"
              closable
              style="margin: 5px"
              >{{ tag.objName }}</a-tag
            >
          </div>
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
  <HumanMadal
    v-model:visible="rorleVisible"
    v-model:data="currenHuman"
    @submit="roleOk"
  />
</template>

<script lang="ts" setup>
import { ref, computed, watch, onMounted, reactive } from 'vue';
import { useFlowStore } from '@/store/index';
import {
  GetHumanRosterList,
  delFlowParticipantByIds,
  editFlowPanelPoint,
  getFlowPanelPointById
} from '@/apis/flowPanelPoint';
import HumanMadal from '../componnents/HumanMadal/index.vue';
import { cloneDeep } from 'lodash';
import { FlowPanelPoint } from '@/apis/flowPanelPoint/type';

let emits = defineEmits(['change']);
const store = useFlowStore();
const rorleVisible = ref(false);
const currenHuman = ref<any[]>([]);
const tagClick = () => {
  currenHuman.value =
    cloneDeep(promoterConfig.value.value.participantList) || [];
  rorleVisible.value = true;
};
//新旧数据对比，找到删掉的人员和新增的人员
const delIds = ref<number[]>([]);
const addData = ref<any>([]);
const roleOk = () => {
  let arr: any = [];
  currenHuman.value.forEach((human) => {
    const { id, name, type } = human;
    arr.push({
      objId: id,
      objName: name,
      objType: type
    });
    const index = promoterConfig.value.value.participantList?.findIndex(
      (participant) =>
        participant.objId === id || (participant.objType === type && type === 5)
    );
    if (typeof index !== 'number' || Number(index) < 0) {
      let obj = {
        objId: id,
        objName: name,
        objType: type
      };
      addData.value.push(obj);
    }
  });
  promoterConfig.value.value.participantList?.forEach((participant) => {
    const index = currenHuman.value.findIndex(
      (human) =>
        participant.objId === human.id ||
        (participant.objType === human.type && human.type === 5)
    );
    if (typeof index !== 'number' || Number(index) < 0) {
      delIds.value.push(participant.id);
    }
  });
  console.log('delIds.value', delIds.value);

  promoterConfig.value.value.participantList = arr;
  rorleVisible.value = false;
};

const promoterConfig = ref<{ value?: any }>({ value: { participantList: [] } });
watch(
  () => store.promoterConfig1,
  (newVal, oldVal) => {
    promoterConfig.value = store.promoterConfig1;
  },
  { deep: true }
);
const closeDrawer = () => {
  store.setPromoter(false);
};
let visible = computed({
  get() {
    return store.promoterDrawer;
  },
  set() {
    closeDrawer();
  }
});

const handleOk = async () => {
  store.setPromoterConfig({
    value: promoterConfig.value,
    flag: true,
    id: promoterConfig.value?.id
  });

  if (delIds.value.length) {
    await delFlowParticipantByIds({ ids: delIds.value });
  }
  const { id, processId, pointName } = promoterConfig.value.value;
  let obj: FlowPanelPoint = {
    id,
    processId,
    pointName,
    participantList: addData.value
  };
  await editFlowPanelPoint({ ...obj });
  // emits("update:nodeConfig", promoterConfig.value);
  emits('change');
  store.setPromoter(false);
};
const handleCancel = () => {
  store.setPromoter(false);
};

const humanList = ref<any[]>([]);
const getHumanList = async () => {
  const res = await GetHumanRosterList({
    pageNumber: 0,
    pageSize: 20,
    typeName: 5
  });
  humanList.value = res?.content || [];
};
const getPonit = async () => {
  const id = promoterConfig.value.value.id;
  const ss = await getFlowPanelPointById(id);
  console.log('ssss', ss);
};
watch(
  () => visible.value,
  (val) => {
    if (!val) return;
    nextTick(() => {
      getPonit();
      getHumanList();
    });
  }
);
</script>

<style lang="less" scoped>
.item {
  padding-bottom: 16px;
  margin: 8px 0;
  border-bottom: 1px solid #eee;
}
</style>
